<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        form div {
            margin: 10px;
        }
        
        thead {
            text-align: center;
            font-weight: 700;
        }
        
        #one {
            width: 40px;
            height: 100px;
            background-color: red;
        }
        
        #two {
            width: 40px;
            height: 100px;
            background-color: green;
        }
        
        table td {
            text-align: center;
            padding: 10px;
            /* 基于底线对齐 */
            vertical-align: bottom;
        }
    </style>
</head>

<body>
    <!-- // 制作一个复利计算器。创建一个页面，允许输入银行存款总额以及存款利率，然后计算出在给定时间段后，钱会变成多少。 -->
    <h1>复利计算器</h1>
    <form action="" name="form">
        <div>
            本金：
            <input type="text" name="base" id="" />
        </div>
        <div>
            年利率：
            <input type="number" name="expone" id="" />
        </div>
        <div>
            年期:
            <select name="time" id="">
          <option value="0.25">3个月(0.25年)</option>
          <option value="0.5">6个月(0.5年)</option>
          <option value="1">12个月(1年)</option>
          <option value="1.5">18个月(1.5年)</option>
          <option value="2">24个月(2年)</option>
          <option value="2.5">30个月(2.5年)</option>
          <option value="3">36个月(3年)</option>
          <option value="5">60个月(5年)</option>
        </select>
        </div>
    </form>
    <table>
        <thead>
            <th>本金</th>
            <th>复利终值</th>
        </thead>
        <tbody>
            <tr>
                <td id="capital"></td>
                <td id="compound"></td>
            </tr>
            <tr>
                <td>
                    <div id="one"></div>
                </td>
                <td>
                    <div id="two"></div>
                </td>
            </tr>
        </tbody>
    </table>
    <script>
        let form = document.forms.form;
        console.log(form);
        let baseField = form.elements['base'];
        console.log(baseField);
        let exponeField = form.elements['expone'];
        console.log(exponeField);
        let timeField = form.elements['time'];
        console.log(timeField);
        form.addEventListener('input', () => {
                let capital = document.getElementById('capital');
                let compound = document.getElementById('compound');
                let two = document.getElementById('two');
                if (baseField.value != '') {
                    function getCompound(base, expone, time) {
                        if (expone != '' && base != '') {
                            capital.innerHTML = baseField.value;
                            let result = Math.round(base * (1 + expone * time));
                            let height = result / base * 100 + 'px';
                            // console.log(height);
                            two.style.height = height;
                            console.log(123);
                            return result;
                        } else {
                            return '';
                        }

                    };
                    // console.log(getCompound);

                    compound.innerHTML = getCompound(baseField.value, exponeField.value, timeField.value * 0.01);
                }
            }

        )
    </script>
</body>

</html>